<template>
    <div class="page">
        <van-tabs v-model="active" @click="changeTab" sticky v-if="showTabs">
            <van-tab :key="index" v-for="(tab,index) in tabs"
                     :title="tab.label">
            </van-tab>
        </van-tabs>
        <router-view class="page-content" :class="!showTabs?'no-tabs':''"></router-view>
        <!--<van-tabbar v-model="tabIndex">-->
            <!--<van-tabbar-item icon="shop" to="/">-->
                <!--<span>打卡</span>-->
                <!--<template slot="icon" slot-scope="props">-->
                    <!--<i class="iconfont oa-dingwei icon-size"></i>-->
                <!--</template>-->
            <!--</van-tabbar-item>-->
            <!--<van-tabbar-item icon="shop" to="/detail">-->
                <!--<span>统计</span>-->
                <!--<template slot="icon" slot-scope="props">-->
                    <!--<i  class="iconfont oa-tongji icon-size"></i>-->
                <!--</template>-->
            <!--</van-tabbar-item>-->
        <!--</van-tabbar>-->
    </div>
</template>

<script>
    import dayjs from 'dayjs'
    import fly from 'flyio'

    export default {
        name: "CardDetail",
        computed:{
           showTabs:function () {
               return this.roleIds.indexOf(this.roleId) != -1
           }
        },
        data() {
            return {
                // currentDay: new Date(),
                active: 0,
                tabIndex:1,
                // pickerDate: null,
                // target: null,
                // format: "year-month",
                // showDatePicker: false,
                userId: "",
                userName: "",
                roleId:"c4d18a824ca54207a38eb718835ef9b4",
                roleIds: ServerParam.RoleIds ? ServerParam.RoleIds : "",
                // maxDate: new Date(),
                tabs: [
                    {
                        label: "日统计",
                        role: "c4d18a824ca54207a38eb718835ef9b4",
                        tag: "day",
                        path:"/detail/day"
                    },
                    {
                        label: "月统计",
                        role: "c4d18a824ca54207a38eb718835ef9b4",
                        tag: "month",
                        path:"/detail/month"
                    },
                    {
                        label: "我的",
                        role: "",
                        tag: "me",
                        path:"/detail/person"
                    }
                ],

            }
        },
        methods: {
            changeTab(index){
                let tab = this.tabs[index]
                this.$router.push(tab.path)
            },

        },
        mounted() {
            let index = 0;
            this.tabs.forEach(tab=>{
                console.log(this.$route.path,tab)
                if(tab.path == this.$route.path){
                    this.active = index;
                    return
                }
                index++;
            })

        }
    }
</script>

<style lang="less">
    .head {
        background: #fff;
        border-top: solid 1px #e0e0e0;
        border-bottom: solid 1px #e0e0e0;

        .date {
            padding-left: 15px;
            padding-right: 15px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;

            color: #2f2f2f;
            .arrow-down {
                color: #aaaaaa;
                font-size: 14px;
                transform: rotate(90deg);
            }
        }
        .name {
            line-height: 40px;
            height: 40px;
            font-size: 14px;
            padding-left: 15px;
            padding-right: 15px;
            .calendar {
                color: #3283fa;
                font-size: 14px;
                float: right;

            }
        }
    }
    .cell-title {
        display: flex;
        flex-direction: row;
        font-size: 14px;
        color: #2f2f2f;
    }
    .number {
        color: #a4a9b2;
        margin-left: auto;
    }


    .top-head {
        height: 50px;
        background: #f0f0f0;
        display: flex;
        align-items: center;
        flex-direction: row;
    }

    .left-btn, .right-btn {
        width: 44px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .left-btn:active, .right-btn:active {
        background: #e8e8e8;
    }

    .top-bar {
        font-size: 14px;
        color: #3283fa;
        line-height: 40px;
        height: 40px;
        padding-left: 15px;
        padding-right: 15px;
        background: #fff;
    }

    .c-tips-title {
        font-size: 12px;
        color: #999999;
    }

    .top-bar .arrow-down {
        transform: rotate(90deg);
    }

    .top-date {
        font-size: 13px;
        color: #999999;
        width: 90px;
        text-align: center;
        margin-left: 10px;
        margin-right: 10px;
    }

    .day-content {
        background: #fff;
        min-height: 240px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .day-content .circle-content {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 180px;
        flex-direction: column;
        height: 180px;
    }

    .day-content .circle-content .c-number {
        font-size: 24px;
        color: #2f2f2f;
        font-weight: bold;
        margin-top: 10px;
    }

    .van-collapse-item__content {
        padding: 0px;
        background: #f0f0f0;
    }

    .cell-item {
        font-size: 14px;
        color: #999999;
        padding-left: 15px;
        padding-right: 15px;
        line-height: 32px;
        height: 32px;
        border-bottom: solid 1px #e0e0e0;
    }

    .day-content .circle-content .c-link {
        font-size: 12px;
        color: #3283fa;
        margin-top: 10px;
    }
    .page-content.show-tabs {

        height: calc(~"100% - 50px - 44px");
    }
    .page-content {
        -webkit-overflow-scrolling: touch;

        &.no-tabs {
            height: calc(~"100%");
        }
    }


</style>